<template>
    <div class="baseInfo">
      <el-descriptions  :column="4" border  class="desc">
        <el-descriptions-item label="订单编号">{{ rowData.orderCode }}</el-descriptions-item>
        <el-descriptions-item label="平台单号">{{ rowData.platformOrderCode }}</el-descriptions-item>
        <el-descriptions-item label="订单类型">{{ rowData.orderType }}</el-descriptions-item>
        <el-descriptions-item label="订单来源">{{ rowData.shopType }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions  :column="4" border class="desc">
        <el-descriptions-item label="店铺名称">{{ rowData.shopName }}</el-descriptions-item>
        <el-descriptions-item label="会员名称">{{ rowData.clientName }}</el-descriptions-item>
        <el-descriptions-item label="业务员">{{ rowData.bizUser }}</el-descriptions-item>
        <el-descriptions-item label="商品数量">{{ rowData.orderCount }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions  :column="4" border class="desc">
        <el-descriptions-item label="标准重量">{{ rowData.weight }}</el-descriptions-item>
        <el-descriptions-item label="标准体积">{{ rowData.volume }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">{{ rowData.totalPrice }}</el-descriptions-item>
        <el-descriptions-item label="让利金额">{{ rowData.yieldAmount }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions  :column="4" border class="desc">
        <el-descriptions-item label="退款金额">{{ rowData.refundAmount }}</el-descriptions-item>
        <el-descriptions-item label="物流费用">{{ rowData.logisticsFee }}</el-descriptions-item>
        <el-descriptions-item label="支付金额">{{ rowData.payAmount }}</el-descriptions-item>
        <el-descriptions-item label="其他费用">{{ rowData.otherFee || '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions :column="1" border class="desc">
        <el-descriptions-item label="买家留言">{{ rowData.buyerRemark }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions :column="1" border class="desc">
        <el-descriptions-item label="卖家留言">{{ rowData.sellerRemark }}</el-descriptions-item>
      </el-descriptions>
      
      <el-descriptions :column="1" border class="desc">
        <el-descriptions-item label="二次备注">{{ rowData.secRemark }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions :column="1" border class="desc">
        <el-descriptions-item label="附加信息">{{ rowData.extInfo }}</el-descriptions-item> 
      </el-descriptions>
    </div>
  </template>
  
  <script>
  export default {
    name: 'address',
    props: {
      cellId: undefined,
      rowData: {
        type: Object,
        default: () => {}
      }
    },
    // components: {
    //   ItemSelect,
    // },
    data() {
      return {
        showEdit: false,
        // showItemSelect: false,
        // queryParams: {
        //   pageNum: 1,
        //   pageSize: 10,
        // },
        // form: {},
        // tableData: {},
        // columnConfig: {
        //   drag: true,
        //   resizable: true,
        //   storage: true,
        //   sortConfig: {
        //     trigger: 'cell',
        //     remote: true
        //   },
        //   align: 'center',
        //   headerAlign: 'center'
        // },
        // rowConfig: {
        //   drag: true,
        //   keyField: 'id',
        //   isHover: true,
        // },
        // title: '',
        // open: false,
        // rules: {
        //     consignee: [
        //         { required: true, message: '请输入收货人', trigger: 'blur' }
        //     ],
        //     phone: [
        //         { required: true, message: '请输入手机', trigger: 'blur' }
        //     ],
        //     addrBrief: [
        //         { required: true, message: '请输入省市区', trigger: 'blur' }
        //     ],
        //     address: [
        //         { required: true, message: '请输入详细地址', trigger: 'blur' }
        //     ],
        // },
        // ids: [],
      }
    },
    created() {
        
      // console.log('poStatus', this.poStatus);
    },
    // watch: {
    //   cellId: {
    //     handler(val) {
    //       this.getList();
    //     },
    //   }
    // },
    methods: {
      // getList() {
      //   getMemberAttributeList(this.cellId).then(response => {
      //     this.tableData = response.data[0] || {};
      //   });
      // },
      // reset(){
      //   this.form = {};
      // },
      // handleEdit(){
      //   this.form = {...this.tableData};
      //   this.showEdit = true;
      // },
      // cancel(){
      //       this.open = false;
      //       this.showEdit = false;
      //       this.reset();
      // },
      // submitForm(){
      //   this.$refs['form'].validate((valid) => {
      //       if (valid) {
      //           const params = {
      //               ...this.form,
      //               clientId: this.cellId,
      //           }
      //           if(this.form.id){
      //               editMemberAttribute(params).then(response => {
      //                   this.$message.success('修改成功')
      //                   this.getList()
      //                   this.cancel()
      //               })
      //           }else{
      //               addMemberAttribute(params).then(response => {
      //                   this.$message.success('新增成功')
      //                   this.getList()
      //                   this.cancel()
      //               })
      //           }
      //       }
      //   })
      // },
    }
  }
  </script>
  
  <style lang="scss" scoped>
    .baseInfo {
      &-header {
        margin-bottom: 10px;
      }

      .desc {
        &:last-child {
          margin-bottom: 0;
        }
      }

      // 强制表格布局为固定，确保列对齐
      ::v-deep .el-descriptions__table { 
        table-layout: fixed !important; 
        width: 100%;
        border-collapse: collapse;
      }
      
      // 4列布局时每列平均分配宽度
      ::v-deep .el-descriptions__table {
        td.el-descriptions-item {
          width: 25% !important;
          vertical-align: top;
        }
      }
      
      // 标签宽度固定
      ::v-deep .desc .el-descriptions__label,
      ::v-deep .desc .el-descriptions-item__label {
        width: 120px !important; 
        min-width: 120px !important;
        max-width: 120px !important;
        white-space: nowrap;
        text-align: justify;
        // text-align-last: justify;
        padding: 12px !important;
        background-color: #fafafa;
        font-weight: bold;
        border-right: 1px solid #ebeef5;
      }
      
      // 内容宽度自适应
      ::v-deep .desc .el-descriptions__content,
      ::v-deep .desc .el-descriptions-item__content {
        width: calc(25% - 120px) !important; 
        min-width: 0; 
        word-break: break-word;
        padding: 12px !important;
        line-height: 1.5;
      }

      // 单列布局的特殊处理
      ::v-deep .desc[column="1"] {
        .el-descriptions-item {
          width: 100% !important;
        }
        .el-descriptions-item__label {
          width: 120px !important;
        }
        .el-descriptions-item__content {
          width: calc(100% - 120px) !important;
        }
      }

      // 确保所有4列布局行的对齐
      ::v-deep .desc[column="4"] {
        .el-descriptions__table {
          tr {
            td:nth-child(1), td:nth-child(3), td:nth-child(5), td:nth-child(7) {
              width: 120px !important;
            }
            td:nth-child(2), td:nth-child(4), td:nth-child(6), td:nth-child(8) {
              width: calc(25% - 120px) !important;
            }
          }
        }
      }
    }
  </style>